<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>销售统计</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style>
        [v-cloak]{
            display: none;
        }
        html,body,#app{
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
        #app{
            overflow: scroll;
            background: #F0F0F0;
            padding: 0 10%;
            box-sizing: border-box;
        }
        .el-form{
            width: 80%;
            margin: 10%;
            box-sizing: border-box;
            padding: 50px 30px 50px 30px;
            background: white;
            min-height: 100%;
        }
        .el-col{
            box-sizing: border-box;
            padding-right: 12px;
        }
        .el-table{
            width: 80%!important;
            margin: 0 10%;
            box-sizing: border-box;
            padding: 10px 30px 50px 30px;
            background: white;
            min-height: 100% !important;
        }
        .el-tabs{

        }
    </style>
</head>
<body>
    <div id="app">
        <template>
            <el-tabs v-model="activeName">
                <el-tab-pane label="统计员工销售额" name="first">
                    <el-form>
                        <el-form-item label="员工编号">

                            <el-select v-model="userSale.userId"
                                       filterable
                                       placeholder="请选择"
                                       style="width: 70%;">
                                <el-option
                                        v-for="item in userList"
                                        :key="item.userId"
                                        :label="item.userId+' '+item.userName"
                                        :value="item.userName">
                                </el-option>
                            </el-select>
                            <el-button icon="el-icon-search" @click="getUserSale"></el-button>
                        </el-form-item>
                        <el-form-item label="统计结果">
                            <el-input v-model="userSale.price" readonly style="width: 70%;"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>

                <el-tab-pane label="统计客户销售额" name="second">
                    <el-form>
                        <el-form-item label="顾客编号">
                            <el-select v-model="clientSale.clientId"
                                       filterable
                                       placeholder="请选择"
                                       style="width: 70%;">
                                <el-option
                                        v-for="item in clientList"
                                        :key="item.clientId"
                                        :label="item.clientId+' '+item.clientName"
                                        :value="item.clientId">
                                </el-option>
                            </el-select>
                            <el-button icon="el-icon-search" @click="getClientSale"></el-button>
                        </el-form-item>
                        <el-form-item label="统计结果">
                            <el-input v-model="clientSale.price" readonly style="width: 70%;"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>

                <el-tab-pane label="统计总销售额" name="third">
                    <el-form>
                        <el-form-item label="统计结果">
                            <el-input v-model="totalSale" readonly style="width: 70%;"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </template>
    </div>

    <script>
        let app = new Vue({
            el: '#app',
            data(){
                return{
                    userId: '',
                    userList: '',
                    clientList: '',
                    activeName: 'first',
                    userSale: {
                        userId: '',
                        price: '',
                    },
                    clientSale: {
                        clientId: '',
                        price: '',
                    },
                    totalSale: '',
                }
            },
            created() {
                this.getUserId();
                this.getTotalSale();
                this.getUserList();
                this.getClientList();
            },
            watch: {
                'userSale.userId':{
                    handler (newValue, oldValue) {
                        this.userSale.price = '';
                    },
                },
                'clientSale.clientId':{
                    handler (newValue, oldValue) {
                        this.clientSale.price = '';
                    },
                },
            },
            methods: {
                getUserId(){
                    axios.post(
                        '/member/getUserId'
                    ).then(function (res) {
                        this.userId = res.data;
                    });
                },
                getUserList(){
                    axios.post(
                        '/member/getListOfUser',
                        'currentPage=1&pageSize=1000'
                    ).then(function (res) {
                        // console.info(res.data);
                        let list = res.data;
                        let bufferList = [];
                        for(let key in list){
                            let i = new Object();
                            i.userId = list[key].userid;
                            i.userName = list[key].username;
                            bufferList.push(i);
                        }
                        app.userList = bufferList;
                        // console.info(app.userList);
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                getClientList(){
                    axios.post(
                        '/client/getAllClient'
                    ).then(function (res) {
                        // console.info(res.data);
                        let list = res.data;
                        let bufferList = [];
                        for(let key in list){
                            let i = new Object();
                            i.clientId = list[key].clientid;
                            i.clientName = list[key].clientname;
                            bufferList.push(i);
                        }
                        app.clientList = bufferList;
                        // console.info(app.clientList);
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                getClientSale(){
                    axios.post(
                        '/client/getSale',
                        'clientId='+this.clientSale.clientId
                    ).then(function (res) {
                        app.clientSale.price = res.data;
                    });
                },
                getUserSale(){
                    axios.post(
                        '/member/getSale',
                        'userId='+this.userSale.userId
                    ).then(function (res) {
                        // console.info(res.data);
                        app.userSale.price = res.data;
                    });
                },
                getTotalSale(){
                    axios.post(
                        '/deal/getSale'
                    ).then(function (res) {
                        app.totalSale = res.data;
                    });
                },
            }
        });
    </script>
</body>
</html>